<template>
  <base-breadcrumb :breadcrumb="!isAudit">
    <a-card
      :bordered="false"
      style="margin-bottom: 20px"
    >
      <title-name title="项目基础信息" />
      <a-form layout="horizontal">
        <a-row :gutter="24">
          <a-col
            :md="16"
            :sm="16"
          >
            <a-form-item
              label="所属单位"
              :label-col="{lg: {span: 5}, sm: {span:5}}"
              :wrapper-col="{lg: {span: 17}, sm: {span: 17} }"
            >
              <a-input
                v-model="dels.viewName"
                placeholder=""
                disabled
              />
            </a-form-item>
          </a-col>
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-item
              label="项目编号"
              :label-col="{lg: {span: 5}, sm: {span:5}}"
              :wrapper-col="{lg: {span: 17}, sm: {span: 17} }"
            >
              <a-input
                v-model="dels.projectNum"
                placeholder=""
                disabled
              />
            </a-form-item>
          </a-col>
<!--          <a-col-->
<!--            :md="8"-->
<!--            :sm="8"-->
<!--          >-->
<!--            <a-form-item-->
<!--              label="分公司"-->
<!--              :label-col="{lg: {span: 5}, sm: {span:5}}"-->
<!--              :wrapper-col="{lg: {span: 17}, sm: {span: 17} }"-->
<!--            >-->
<!--              <a-input-->
<!--                v-model="dels.branch"-->
<!--                placeholder=""-->
<!--                disabled-->
<!--              />-->
<!--            </a-form-item>-->
<!--          </a-col>-->
        </a-row>

        <a-row :gutter="24">
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-item
              label="维保期年限(年)"
              :label-col="{lg: {span: 5}, sm: {span:5}}"
              :wrapper-col="{lg: {span: 17}, sm: {span: 17} }"
            >
              <a-input
                v-model="dels.maintainYear"
                placeholder=""
                disabled
              />
            </a-form-item>
          </a-col>
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-item
              label="维保期截止时间"
              :label-col="{lg: {span: 5}, sm: {span:5}}"
              :wrapper-col="{lg: {span: 17}, sm: {span: 17} }"
            >
              <a-input
                v-model="dels.endTime"
                disabled
              />
            </a-form-item>
          </a-col>
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-item
              label="状态"
              :label-col="{lg: {span: 5}, sm: {span:5}}"
              :wrapper-col="{lg: {span: 17}, sm: {span: 17} }"
            >
              <a-input
                v-model="dels.statusName"
                disabled
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>

    <a-card :bordered="false">
      <title-name title="维保期记录" />

      <a-table
        ref="table"
        :pagination="false"
        bordered
        size="default"
        row-key="key"
        :columns="columns"
        :data-source="dels.recordList"
        :alert="true"
        show-size-changer
        show-quick-jumper
        show-pagination="auto"
      >
        <span
          slot="serial"
          slot-scope="text, record, index"
        >{{ index + 1 }}</span>

        <span
          slot="action"
          slot-scope="text, record"
        >
          <template>
            <a @click="recordDetails(record)">查看</a>
          </template>
        </span>
      </a-table>

      <!--维保期记录-->
      <a-modal
        v-model="visible"
        width="900px"
        :title="title"
        destroy-on-close
      >
        <title-name title="基本信息" />
        <template slot="footer">
          <a-button
            key="back"
            @click="handleCancel"
          >
            取消
          </a-button>
        </template>
        <a-form :model="form">
          <a-row>
            <a-col
              :md="12"
              :sm="12"
            >
              <a-form-item
                label="项目名称"
                :label-col="{ lg: { span: 5 }, sm: { span: 5 } }"
                :wrapper-col="{ lg: { span: 18 }, sm: { span: 18 } }"
              >
                <!-- <a-input v-model="recordsDel.projectName" disabled/> -->
                <a-textarea
                  v-model="recordsDel.projectName"
                  class="distextarea"
                  disabled
                  auto-size
                />
              </a-form-item>
            </a-col>
            <a-col
              :md="12"
              :sm="12"
            >
              <a-form-item
                label="项目编号"
                :label-col="{ lg: { span:5 }, sm: { span: 5 } }"
                :wrapper-col="{ lg: { span: 18 }, sm: { span: 18 } }"
              >
                <a-input
                  v-model="recordsDel.projectCode"
                  disabled
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col
              :md="12"
              :sm="12"
            >
              <a-form-item
                label="项目经理"
                :label-col="{ lg: { span: 5 }, sm: { span: 5 } }"
                :wrapper-col="{ lg: { span: 18 }, sm: { span: 18 } }"
              >
                <!-- <a-input v-model="recordsDel.pmName" disabled/> -->
                <a-textarea
                  v-model="recordsDel.pmName"
                  class="distextarea"
                  disabled
                  auto-size
                />
              </a-form-item>
            </a-col>
            <a-col
              :md="12"
              :sm="12"
            >
              <a-form-item
                label="记录人员"
                :label-col="{ lg: { span:5 }, sm: { span: 5 } }"
                :wrapper-col="{ lg: { span: 18 }, sm: { span: 18 } }"
              >
                <!-- <a-input v-model="recordsDel.creatorName" disabled/> -->
                <a-textarea
                  v-model="recordsDel.creatorName"
                  class="distextarea"
                  disabled
                  auto-size
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col
              :md="12"
              :sm="12"
            >
              <a-form-item
                label="上午天气"
                :label-col="{ lg: { span: 5 }, sm: { span: 5 } }"
                :wrapper-col="{ lg: { span: 18 }, sm: { span: 18 } }"
              >
                <a-input
                  v-model="recordsDel.morningWeatherName"
                  disabled
                />
              </a-form-item>
            </a-col>
            <a-col
              :md="12"
              :sm="12"
            >
              <a-form-item
                label="下午天气"
                :label-col="{ lg: { span:5 }, sm: { span: 5 } }"
                :wrapper-col="{ lg: { span: 18 }, sm: { span: 18 } }"
              >
                <a-input
                  v-model="recordsDel.afterNoonWeatherName"
                  disabled
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col
              :md="12"
              :sm="12"
            >
              <a-form-item
                label="最高温度(˚C)"
                :label-col="{ lg: { span: 5 }, sm: { span: 5 } }"
                :wrapper-col="{ lg: { span: 18 }, sm: { span: 18 } }"
              >
                <a-input
                  v-model="recordsDel.maxTemperature"
                  disabled
                />
              </a-form-item>
            </a-col>
            <a-col
              :md="12"
              :sm="12"
            >
              <a-form-item
                label="最低温度(˚C)"
                :label-col="{ lg: { span:5 }, sm: { span: 5 } }"
                :wrapper-col="{ lg: { span: 18 }, sm: { span: 18 } }"
              >
                <a-input
                  v-model="recordsDel.minTemperature"
                  disabled
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col
              :md="12"
              :sm="12"
            >
              <a-form-item
                label="风力"
                :label-col="{ lg: { span: 5 }, sm: { span: 5 } }"
                :wrapper-col="{ lg: { span: 18 }, sm: { span: 18 } }"
              >
                <!-- <a-input v-model="recordsDel.windPower"   disabled /> -->
                <a-textarea
                  v-model="recordsDel.windPower"
                  class="distextarea"
                  disabled
                  auto-size
                />
              </a-form-item>
            </a-col>
            <a-col
              :md="12"
              :sm="12"
            >
              <a-form-item
                label="有无突发事件"
                :label-col="{ lg: { span:5 }, sm: { span: 5 } }"
                :wrapper-col="{ lg: { span: 18 }, sm: { span: 18 } }"
              >
                <a-input
                  v-model="recordsDel.emergency"
                  disabled
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col
              v-if="emergencyInfo"
              :md="24"
              :sm="24"
            >
              <a-form-item
                label="突发事件说明"
                :label-col="{ lg: { span: 5 }, sm: { span: 5 } }"
                :wrapper-col="{ lg: { span: 18 }, sm: { span: 18 } }"
              >
                <BaseTextarea
                  v-model="recordsDel.emergencyInstructions"
                  disabled
                />
              </a-form-item>
            </a-col>
          </a-row>


          <title-name title="维保信息" />
          <a-row>
            <a-col
              :md="12"
              :sm="12"
            >
              <a-form-item
                label="维保记录名称"
                :label-col="{ lg: { span: 5 }, sm: { span: 5 } }"
                :wrapper-col="{ lg: { span: 18 }, sm: { span: 18 } }"
              >
                <!-- <a-input v-model="recordsDel.recordName" disabled/> -->
                <a-textarea
                  v-model="recordsDel.recordName"
                  class="distextarea"
                  disabled
                  auto-size
                />
              </a-form-item>
            </a-col>
            <a-col
              :md="12"
              :sm="12"
            >
              <a-form-item
                label="维保费用(万)"
                :label-col="{ lg: { span:5 }, sm: { span: 5 } }"
                :wrapper-col="{ lg: { span: 18 }, sm: { span: 18 } }"
              >
                <a-input
                  v-model="recordsDel.maintainCost"
                  disabled
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col
              :md="12"
              :sm="12"
            >
              <a-form-item
                label="维保日期"
                :label-col="{ lg: { span: 5 }, sm: { span: 5 } }"
                :wrapper-col="{ lg: { span: 18 }, sm: { span: 18 } }"
              >
                <a-input
                  v-model="recordsDel.maintainTime"
                  disabled
                />
              </a-form-item>
            </a-col>
            <a-col
              :md="12"
              :sm="12"
            >
              <a-form-item
                label="实施人员"
                :label-col="{ lg: { span:5 }, sm: { span: 5 } }"
                :wrapper-col="{ lg: { span: 18 }, sm: { span: 18 } }"
              >
                <a-input
                  v-model="recordsDel.implementName"
                  disabled
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col
              :md="12"
              :sm="12"
            >
              <a-form-item
                label="实施队伍"
                :label-col="{ lg: { span: 5 }, sm: { span: 5 } }"
                :wrapper-col="{ lg: { span: 18 }, sm: { span: 18 } }"
              >
                <!-- <a-input v-model="recordsDel.implemenTeam" disabled  /> -->
                <a-textarea
                  v-model="recordsDel.implemenTeam"
                  class="distextarea"
                  disabled
                  auto-size
                />
              </a-form-item>
            </a-col>
          </a-row>

          <title-name title="维保事项" />
          <a-table
            bordered
            :columns="columnMatter"
            :data-source="recordsDel.matters"
          >
            <span
              slot="serial"
              slot-scope="text, record, index"
            >{{ index + 1 }}</span>
          </a-table>

          <title-name
            title="上传相关附件"
            style="margin-top: 20px"
          />
          <u-table
            :is-show="false"
            :upload-arrys="recordsDel.fileIdList"
            :list-url="listUrl"
            :upload-list="uploadList"
            :delete-url="deleteUrl"
          />
        </a-form>
      </a-modal>
    </a-card>

    <a-card>
      <title-name title="维保期延长信息" />

      <a-table
        ref="table"
        :pagination="false"
        bordered
        size="default"
        row-key="key"
        :columns="columnExtend"
        :data-source="dels.delayList"
        :alert="true"
        show-size-changer
        show-quick-jumper
        show-pagination="auto"
      >
        <span
          slot="serial"
          slot-scope="text, record, index"
        >{{ index + 1 }}</span>
        <span
          slot="delayReason"
          slot-scope="text, record, index"
        >
          <ellipsis
            :length="120"
            tooltip
          >{{ text }}</ellipsis>
        </span>
        <span
          slot="action"
          slot-scope="text, record, index"
        >
          <a @click="extendsDetails(record)">查看</a>
        </span>
      </a-table>


      <!--维保期延长信息-->
      <a-modal
        v-model="visibles"
        width="900px"
      >
        <title-name title="维保期延长申请" />
        <template slot="footer">
          <a-button
            key="back"
            @click="handleCancels"
          >
            取消
          </a-button>
        </template>
        <a-form>
          <a-row>
            <a-col
              :md="12"
              :sm="12"
            >
              <a-form-item
                label="分公司"
                :label-col="{ lg: { span: 5 }, sm: { span: 5 } }"
                :wrapper-col="{ lg: { span: 18 }, sm: { span: 18 } }"
              >
                <a-input
                  v-model="delayDels.branch"
                  disabled
                />
              </a-form-item>
            </a-col>
            <a-col
              :md="12"
              :sm="12"
            >
              <a-form-item
                label="项目名称"
                :label-col="{ lg: { span:5 }, sm: { span: 5 } }"
                :wrapper-col="{ lg: { span: 18 }, sm: { span: 18 } }"
              >
                <a-input
                  v-model="delayDels.projectName"
                  disabled
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col
              :md="12"
              :sm="12"
            >
              <a-form-item
                label="项目编号"
                :label-col="{ lg: { span: 5 }, sm: { span: 5 } }"
                :wrapper-col="{ lg: { span: 18 }, sm: { span: 18 } }"
              >
                <a-input
                  v-model="delayDels.projectNum"
                  disabled
                />
              </a-form-item>
            </a-col>
            <a-col
              :md="12"
              :sm="12"
            >
              <a-form-item
                label="项目维保年限"
                :label-col="{ lg: { span:5 }, sm: { span: 5 } }"
                :wrapper-col="{ lg: { span: 18 }, sm: { span: 18 } }"
              >
                <a-input
                  v-model="delayDels.maintainYear"
                  disabled
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col
              :md="12"
              :sm="12"
            >
              <a-form-item
                label="当前维保期截止时间"
                :label-col="{ lg: { span: 5 }, sm: { span: 5 } }"
                :wrapper-col="{ lg: { span: 18 }, sm: { span: 18 } }"
              >
                <a-input
                  v-model="delayDels.endTime"
                  disabled
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col
              :md="24"
              :sm="24"
            >
              <a-form-item
                class="titleName"
                label="地基基础工程和主题结构工程，为设计文件规定的该工程的合理，延长时间（月）"
                :label-col="{ lg: { span: 18 }, sm: { span: 18 } }"
                :wrapper-col="{ lg: { span: 5 }, sm: { span: 5} }"
              >
                <a-input-number
                  v-model="delayDels.useMonth"
                  :min="0"
                  disabled
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col
              :md="24"
              :sm="24"
            >
              <a-form-item
                class="titleName"
                label="屋面防水要求的卫生间、房间和外墙面的防渗漏年限，延长时间（月）"
                :label-col="{ lg: { span: 18 }, sm: { span: 18 } }"
                :wrapper-col="{ lg: { span: 5 }, sm: { span: 5} }"
              >
                <a-input-number
                  v-model="delayDels.leakageMonth"
                  :min="0"
                  disabled
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col
              :md="24"
              :sm="24"
            >
              <a-form-item
                class="titleName"
                label="供热与供冷系统，为2个采暖期、供冷期，延长时间（月）"
                :label-col="{ lg: { span: 18 }, sm: { span: 18 } }"
                :wrapper-col="{ lg: { span: 5 }, sm: { span: 5} }"
              >
                <a-input-number
                  v-model="delayDels.coolingMonth"
                  :min="0"
                  disabled
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col
              :md="24"
              :sm="24"
            >
              <a-form-item
                class="titleName"
                label="电气管线、给排水管道、设备安装，延长时间（月）"
                :label-col="{ lg: { span: 18 }, sm: { span: 18 } }"
                :wrapper-col="{ lg: { span: 5 }, sm: { span: 5} }"
              >
                <a-input-number
                  v-model="delayDels.installMonth"
                  :min="0"
                  disabled
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col
              :md="24"
              :sm="24"
            >
              <a-form-item
                class="titleName"
                label="装修工程，延长时间（月）"
                :label-col="{ lg: { span: 18 }, sm: { span: 18 } }"
                :wrapper-col="{ lg: { span: 5 }, sm: { span: 5} }"
              >
                <a-input-number
                  v-model="delayDels.engineeringMonth"
                  :min="0"
                  disabled
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col
              :md="24"
              :sm="24"
            >
              <a-form-item
                label="维保期延长原因"
                :label-col="{ lg: { span: 5 }, sm: { span: 5 } }"
                :wrapper-col="{ lg: { span: 18 }, sm: { span: 18 } }"
              >
                <BaseTextarea
                  v-model="delayDels.delayReason"
                  placeholder="请输入维保延长原因"
                  disabled
                />
              </a-form-item>
            </a-col>
          </a-row>

          <title-name title="上传相关附件" />
          <u-table
            :is-show="false"
            :upload-arrys="delayDels.fileIdList"
            :list-url="listUrl"
            :upload-list="uploadList"
            :delete-url="deleteUrl"
          />
        </a-form>
      </a-modal>
    </a-card>


    <div v-if="!isConsultation"  class="footer-btns page-btn-right-top">
      <a-button
        type="primary"
        style="float: right"
        @click="goBack"
      >
        关闭
      </a-button>
    </div>
  </base-breadcrumb>
</template>

<script>
  import { STable, Ellipsis } from '@/components'
  import {  maintainRecordDeatails,maintainDelayDeatails,maintainOneDeatails } from '@/api/project/maintain'
  import  {  getOrganizeUserList, getTypes } from '@/api/commons'

  import ARow from 'ant-design-vue/es/grid/Row'


  const columns = [
    {
      title: '序号',
       width: 65,

      scopedSlots: { customRender: 'serial' }
    },
    {
      title: '维保记录名称',
      width:'200px',
      dataIndex: 'recordName',
      ellipsis:true,
    },
    {
      title: '有无突发事件',
      dataIndex: 'emergency',

    },
    {
      title: '实施人员',
      dataIndex: 'implement',
    },
    {
      title: '实施队伍',
      width:'150px',
      dataIndex: 'implemenTeam',
      ellipsis:true,
    },
    {
      title: '维保费用(万)',
      dataIndex: 'maintainCost',
    },
    {
      title: '创建人',
      dataIndex: 'creatorName',
    },
    {
      title: '维保时间',
      dataIndex: 'maintainTime',
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: '150px',
      fixed:'right',
      scopedSlots: { customRender: 'action' }
    }
  ]
  const columnExtend = [
    {
      title: '序号',
       width: 65,

      dataIndex: 'serial',
      scopedSlots: { customRender: 'serial' }
    },
    {
      title: '最长维保期延长时间（月）',
      width:'220px',
      dataIndex: 'longestDelayTime',
    },
    {
      title: '维保期延长原因',
      dataIndex: 'delayReason',
      scopedSlots: { customRender: 'delayReason' },
      width: '60%'
    },
    {
      title: '申请人',
      dataIndex: 'creatorName',
    },
    {
      title: '申请时间',
      dataIndex: 'createTime',
    },
    {
      title: '操作',
      dataIndex: 'action',
      scopedSlots: { customRender: 'action' },
    }
  ];

  const columnMatter = [
    {
      title: '序号',
       width: 65,
      dataIndex: 'serial',

      scopedSlots: { customRender: 'serial' },
    },
    {
      title: '维保事项描述',
      dataIndex: 'descriptions',
      width: '20%',
      scopedSlots: { customRender: 'descriptions' },
    },
    {
      title: '责任方',
      dataIndex: 'responsible',
      width: '20%',
      scopedSlots: { customRender: 'responsible' },
    },
    {
      title: '责任为分包商时,分包商名称',
      dataIndex: 'subcontractorName',
      width: '40%',
      scopedSlots: { customRender: 'subcontractorName' },
    }
  ];

  export default {
    name:'a'+Date.now(),
    components: {
      ARow,
      Ellipsis,
    },
    props: {
      // 是否作为审批详情
      isAudit: {
        type: Boolean,
        default: false
      },
      // 是否作为意见征询
      isConsultation: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        recordsDel:{}, // 维保期记录详情
        delayDels:{},  // 维保期延长申请详情

        emergencyInfo:false, // 突发事件说明
        columns,
        columnExtend,
        columnMatter,

        listUrl:'',
        deleteUrl:'/cscec-project-business/file/business/project-fileDelete',
        uploadList:'/cscec-project-business/file/business/fileUpload',

        dataSource:[],

        visible:false,   // 维保期记录
        visibles:false,  // 维保期延长申请

        title:'',
        form:{},

        currentDate:'', // 当前日期

        responsibles:[{id:1,name:'分包商'},{id:2,name:'我方'},{id:3,name:'业主'}],

        data:[],
        // 加载数据方法 必须为 Promise 对象
        selectedRowKeys: [],
        selectedRows: [],
        selectId:[],

        selectedRowKeysM: [],
        selectedRowsM: [],
        selectMaters:[],
        count:1,

        dels:{
          viewName: ""
        },
        totalDels:{},
        memberList:[], // 实施人员

        weathers:[],  // 天气数据
        projectId:'',  //  项目Id
        id:'',  //  项目Id
        type:''  // 类型

      }
    },

    created() {
        this.projectId = this.$route.query.projectId
        this.id = this.$route.query.id
        this.type = this.$route.query.type
        this.maintainRecordDetailsReq()

    },
    computed: {
    },
    methods: {
      /**
       * 维保期详情
       */
      maintainRecordDetailsReq(){
        let that = this
        if(that.type == 'approve' || this.isConsultation){
          that.projectId = that.id.replace(/[^0-9]/ig,"")
          // that.projectId = that.id
        }
        // @param {type}  1: 处于审批流程中，需要查看审批中的维保期延长信息   0：正常详情，需要查看审批通过的信息
        maintainRecordDeatails({projectId:that.projectId, type: that.type == 'approve' || this.isConsultation ? 1 : 0}).then(res=>{
          if(res.data.code == 200 || res.code == 200){
            that.dels = res.data
            this.dels.viewName = this.dels.branch + '/' + this.dels.projectName
          }
        })
      },


      // 维保期记录详情
      recordDetails(val){
        maintainOneDeatails({id:val.id}).then(res=>{
          if(res.code == 200){
            this.visible = true
            this.recordsDel = res.data
            if(this.recordsDel.emergency == '有'){
              this.emergencyInfo = true
            }else{
              this.emergencyInfo = false
            }
          }
        })
      },

      handleCancel(){
        this.visible = false
      },

      // 维保期延长申请详情
      extendsDetails(val){
        maintainDelayDeatails({id:val.id}).then(res=>{
          if(res.code == 200){
            this.visibles = true
            this.delayDels = res.data
            this.delayDels.maintainYear =  this.dels.maintainYear
            this.delayDels.endTime =  this.dels.endTime
          }
        })
      },


      handleCancels(){
        this.visibles = false
      },

      goBack() {
        if(this.type == 'approve'){
          window.close()
        }else{
          this.$multiTab.close(this.$route.fullpath)
        }
      },



      onCellChangeDes(val){
        this.selectedRowsM.descriptions = val.target.value
      },

      handleChangeResponsible(val){
        console.log("返回责任方数据：",val)
        console.log("返回责任方数据w：",this.selectedRowsM)
        // this.$set(this.selectedRowsM.responsible, val)
        this.selectedRowsM.responsible = val
      },

      onCellChangeSub(val){
        this.selectedRowsM.subcontractorName = val.target.value
      },

    }
  }
</script>


<style>
  .ant-row .ant-col .titleName.ant-form-item .ant-form-item-label{
    height: 28px;
    width: 540px;
    line-height: 22px;
    padding: 6px 4px 0 0;
    text-align: right;
    white-space: pre-wrap;
    overflow: visible;
  }
  .ant-row .ant-col .titleName.ant-form-item .ant-form-item-control-wrapper{
    width: calc(100% - 540px);
  }
</style>
